<script setup lang="ts">
import { reactive, ref } from 'vue'

// 状态参数
const state = reactive({
  activeCatalog: 0,
  activeOrder: 'a',
  searchValue: '',
  catalogs: [
    { text: '全部商品', value: 0 },
    { text: '新款商品', value: 1 },
    { text: '活动商品', value: 2 },
  ],
  order: [
    { text: '默认排序', value: 'a' },
    { text: '好评排序', value: 'b' },
    { text: '销量排序', value: 'c' },
  ],
})

// 组件
const pagingRef = ref()

// 切换
function handleChange() {
  window.console.log('search', state.activeCatalog, state.activeOrder)
}

// 列表数据
const dataList = ref<any>([])

// 请求列表
function queryList(_pageNo: number, _pageSize: number) {
  const list = [
    {
      imgUrl:
          '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
      title:
          '【活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
      price: '388',
      vipPrice: '378',
      shopDesc: '自营',
      delivery: '厂商配送',
      shopName: '阳澄湖大闸蟹自营店>',
    },
  ]
  pagingRef.value.complete(Array.from({ length: 8 }).fill(list).flat())
}

// 访问商品
function onVisitProd() {
  uni.navigateTo({
    url: `/pages/market/detail?id=1`,
  })
}
</script>

<template>
  <z-paging
    ref="pagingRef"
    v-model="dataList"
    rounded-t-md
    bg-white
    m-10rpx
    mb-0
    overflow-hidden
    @query="queryList"
  >
    <template #top>
      <nut-menu>
        <nut-menu-item
          v-model="state.activeCatalog"
          :options="state.catalogs"
        />
        <nut-menu-item
          v-model="state.activeOrder"
          :options="state.order"
          @change="handleChange"
        />
      </nut-menu>
      <nut-searchbar
        v-model="state.searchValue"
        class="search"
        placeholder="百亿补贴"
      >
        <template #leftin>
          <nut-icon name="search" />
        </template>
        <template #rightout>
          搜索
        </template>
      </nut-searchbar>
    </template>
    <view v-for="(item, index) in dataList" :key="index" class="list">
      <nut-card
        :img-url="item.imgUrl"
        :title="item.title"
        :price="item.price"
        :vip-price="item.vipPrice"
        :shop-desc="item.shopDesc"
        :delivery="item.delivery"
        :shop-name="item.shopName"
        @click="onVisitProd"
      />
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
  .list {
    padding: 20rpx;
  }
  .search {
    padding: 20rpx 20rpx 0;
  }
</style>

<route lang="json">
{
  "style": {
    "navigationStyle": "default",
    "navigationBarTitleText": "热销商品"
  }
}
</route>
